<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
    父子组件之间的参数传递
    1.  父组件  => 子组件    props  单向数据流
    2.  子组件  => 父组件   自定义事件   调用函数时将子组件中的参数传递给父组件

    自定义事件  事件名编写规则
    不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。
    举个例子，如果触发一个 camelCase 名字的事件
     this.$emit('myEvent')
    则监听这个名字的 kebab-case 版本是不会有任何效果的
    没有效果
    <my-component v-on:my-event="doSomething"></my-component>

    原因:
     不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，
     所以就没有理由使用 camelCase 或 PascalCase 了。
     并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，
     所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到

    推荐你始终使用 kebab-case 的事件名


-->
<div id="app">
    <div :style="{ fontSize: fontSize + 'px' }">
        <Blog :blog-title='title' @parent-enlarge-text="parentEnlargeText"></Blog>
<!--        <button @click="parentEnlargeText">parent</button>-->
    </div>
</div>

<script>

    // blog 子组件
    let blog = {
        template: `
          <div>
          <h3>{{ blogTitle }}</h3>
          <button @click="enlargeText">Enlarge text</button>
          </div>
        `,
        props: ['blogTitle'],
        methods: {
            enlargeText() {
                //  调用组件本身的自定义事件  参数一  自定义事件名  参数二  调用自定义事件时传递的参数
                this.$emit('parent-enlarge-text',5)
            }
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {
            title: '这是第一篇博客标题',
            fontSize: 30
        },
        methods: {
            parentEnlargeText(size){  //  改变fontSize值
                console.log('parentEnlargeText',size)
                this.fontSize+=size
            }
        },
        components: {
            blog
        }
    })
</script>
</body>
</html>